/**
* Copyright 2009 Waag Society <http://www.waag.org>
* This file is part of Annotrax.
*
* Annotrax is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License,
* or (at your option) any later version.
*
* Annotrax is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
* See the GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Annotrax.
* If not, see http://www.gnu.org/licenses/gpl.html
*/

self.AnnotationMaker = function(container,channels,movie)
{
	this.movie = movie
	this.channels = channels
	this.currentChannel = null;
	
	//main div for this ui element
	this.el_main = Element("div",{className:"annotation_maker"},container)
	
	//upper part of this gui thing
	//el_top = Element("div",{className:"annotation_maker_top"},this.el_main) 
	el_left =  Element("div",{className:"am_top_left"},this.el_main)
	el_middle =  Element("div",{className:"am_top_middle"},this.el_main)
	el_right =  Element("div",{className:"am_top_right"},this.el_main)
	
	//previous page button
	el_prev = Element("div",{className:"am_button ui-corner-all am_button_prev"},el_left,"prev") //button
	Element("span",{className:"ui-icon ui-icon-circle-arrow-w"},el_prev,"next")
	
	//animating box showing channel name
	el_header_box = Element("div",{className:"am_header_box"},el_middle) //slides container
	this.els_channel_info = new Array() 
	for(var i=0;i<channels.length;i++)
	{
		channel = channels[i]
		el_channel_info = Element("div",{className:"am_channel_info ui-corner-all"},el_header_box,channel.name)
		el_channel_color_dot = Element("div",{className:"color_dot ui-corner-all"},el_channel_info)
		el_channel_color_dot.style.backgroundColor = channel.getColor()
		el_channel_info.channel = channel
		$(el_channel_info).hide()
		this.els_channel_info.push(el_channel_info)	
	}
	
	//next page button
	el_next = Element("div",{className:"am_button ui-corner-all am_button_next"},el_right,"next")
	Element("span",{className:"ui-icon ui-icon-circle-arrow-e"},el_next,"next")
	
	//lower part of this gui thing containing form for annotating
	el_panel_container =  Element("div",{className:"am_panel_container"},el_middle)
	this.panels = new Array()
	for(var i=0;i<channels.length;i++)
	{
		panel = new AnnotationPanel(el_panel_container,channels[i],movie)
		this.panels.push(panel)
		panel.hide()
	}
	
	//add  interaction to buttons
	el_next.onclick = bind(this,"onNext")
	el_prev.onclick = bind(this,"onPrevious")
	$(document).bind("annotation_click",bind(this,"onEditAnnotation")); //function(evt,channel,annotation){
		
	//
	this.showPage(0,true)
}
/**
Custom made carrousel, no 20K lib needed
*/
AnnotationMaker.prototype.showPage = function(num,left)
{
	if(num == this.currentChannel)
	{
		return; //do nothing when curren panel already displaying
	}
			
	slide_distance = $(this.el_main).width() + "px";
	
	//hide elements
	if(this.currentChannel != null)
	{
		el_title_hide = this.els_channel_info[this.currentChannel];
		page_hide = (this.panels[this.currentChannel]);	
		$(el_title_hide).animate({"left":	(left == true ? "-":"") + slide_distance},800,null,function(){$(this).hide()});// from 0 to out of viewport
		page_hide.hide()
	}
	
	//show elements
	el_title_show = this.els_channel_info[num]
	page_show = (this.panels[num]);
	$(el_title_show).show()
	$(el_title_show).css("left",(left == true ? "":"-") + slide_distance) // from left out of view port to 0
	$(el_title_show).animate({"left":"0px"},1000);
	page_show.show()
	page_show.displayStartContent()
	
	this.currentChannel = num
}
/**
Show next channel 
*/
AnnotationMaker.prototype.onNext = function()
{
	$(document).trigger(jQuery.Event("annotation_cancel"),[])
	show = (this.currentChannel + 1) % this.els_channel_info.length;
	this.showPage(show,false)
}
/**
Show previous channel 
*/
AnnotationMaker.prototype.onPrevious = function()
{
	$(document).trigger(jQuery.Event("annotation_cancel"),[])
	show = (this.currentChannel + this.els_channel_info.length - 1) % this.els_channel_info.length
	this.showPage(show,true)
}	
/**
Show the right page for the annotation / channel 
*/
AnnotationMaker.prototype.onEditAnnotation = function(evt,channel,annotation)
{
	page = this.channels.getIndex(channel)
	this.showPage(page,true)
	panel = this.panels[page];
	panel.show()
	panel.displayFormContent(annotation)	
}	
/**
container for form and additonal buttons
*/
self.AnnotationPanel = function(container,channel,movie)
{
	//container for this gui element
	this.el_main = Element("div",{className:"am_panel"},container)	
	
	//feedback for user
	this.el_feedback = Element("div",{className:"am_feedback"},this.el_main,"")
		
	//panel1: start button
	this.el_start_content = Element("div",{className:"am_step_panel"},this.el_main)
	el_description =  Element("div",{className:"am_step_panel_description"},this.el_start_content,channel.description)
	el_start_button = Element("div",{className:"am_button am_start_button  ui-corner-all"},this.el_start_content,"Start annotation")
	
	//panel2: form and 'add' buttons
	this.el_form_content = Element("div",{className:"am_step_panel"},this.el_main)
	annotation_form = new AnnotationForm(this.el_form_content,movie,channel)
	el_stop_button = Element("div",{className:"am_button am_button_add ui-corner-all"},this.el_form_content,"add")
	el_cancel_button = Element("div",{className:"am_button am_button_cancel ui-corner-all"},this.el_form_content,"cancel")
	this.el_preview_button = Element("div",{className:"am_button am_button_cancel ui-corner-all"},this.el_form_content,"preview")
	
	//form gui thing	
	this.form = annotation_form;
	
	el_start_button.addEventListener("click", bind(this,"startClicked",[]),true );
	el_stop_button.addEventListener("click", bind(this,"addClicked",[]),true );
	el_cancel_button.addEventListener("click", bind(this,"cancelClicked",[]),true );
	this.el_preview_button.addEventListener("click", bind(this,"previewClicked",[]),true );
}
/**
display the panel showing the start button
*/
AnnotationPanel.prototype.displayStartContent = function()
{
	this.clearUserFeedback()
	$(this.el_start_content).show()
	$(this.el_form_content).hide()
}
/**
set feedback for user, after annotation was succesfully made
*/
AnnotationPanel.prototype.setUserFeedback = function(text)
{
	this.clearUserFeedback();
	$(this.el_feedback).html(text)
}
/**
clear currently showing feedback
*/
AnnotationPanel.prototype.clearUserFeedback = function()
{
	$(this.el_feedback).html("")
	$(this.el_feedback).removeClass("error")
}
/**
set error feedback on unsuccessfull annotation
*/
AnnotationPanel.prototype.setUserErrorFeedback = function(text)
{
	this.clearUserFeedback();
	$(this.el_feedback).addClass("error")
	$(this.el_feedback).html("errors: " + text)	
}
/**
display the panel showing the annotation form
*/
AnnotationPanel.prototype.displayFormContent = function(annotation)
{
	this.clearUserFeedback()
	$(this.el_start_content).hide()
	$(this.el_form_content).show()
	try
	{
		if(annotation != null)
		{
			this.form.editAnnotation(annotation)
			$(this.el_preview_button).show()
		}
		else
		{
			this.form.newAnnotation()
			$(this.el_preview_button).hide()
		}
	}
	catch(exception)
	{
		this.displayStartContent()
		this.setUserErrorFeedback(exception)
	}
}
/**
show this panel
*/
AnnotationPanel.prototype.show = function()
{
	$(this.el_main).show() //
}
/**
hide this panel
*/
AnnotationPanel.prototype.hide = function()
{
	$(this.el_main).hide() //
}
/**
user clicked the start button
*/
AnnotationPanel.prototype.startClicked = function()
{
	this.displayFormContent()
}
/**
user clicked the add button
*/
AnnotationPanel.prototype.addClicked = function()
{
	$(document).trigger(jQuery.Event("annotation_stop"),[])

	try
	{
		annotation = this.form.submit2();	
		
		if(annotation != null)
		{
			this.displayStartContent()
			this.setUserFeedback(annotation.toText())
		}
	}
	catch(exception)
	{
		this.setUserErrorFeedback(exception)
	}
}
/**
user clicked cancel button
*/
AnnotationPanel.prototype.cancelClicked = function()
{
	//
	this.form.cancel()
	this.displayStartContent()
}
/**
user clicked the preview button, show a preview of the annotation
*/
AnnotationPanel.prototype.previewClicked = function()
{
	$(document).trigger(jQuery.Event("annotation_click"),[this.form.channel,this.form.annotation]);
}
